<template>
  <div id="app">
    <nav>
      <img src="../../images/login.png" alt="" class="logPic">
      <div class="indexNav">
        <router-link to="/home"> 首页</router-link>
        <!-- <router-link to="/ProductList">热门促销</router-link>             -->
        <router-link to="/Cake">蛋糕</router-link>
        <router-link to="/Personal">个人中心</router-link>
        <router-link to="/setOrder">订单详情</router-link>
        <router-link to="/cart">购物车</router-link>
        <div style="display:inline-block" v-if="show==true" class="">
          <router-link to="/Login">登录</router-link>
          <router-link to="/register">注册</router-link>
        </div>
        <div v-else style="display:inline-block">
          <img :src=user.headpic alt="" class="img">
          <span>{{user.name}}</span>
          <button @click="layout" class="btnchange">退出</button>

        </div>
      </div>

    </nav>
    <router-view />
    <footer>
      <div class="footer">
        <img class="footer-logo" src="../../images/logo.png" height="23" width="200" alt="">
        <div class="footer-nav">
          <a>诺心公告</a>
          <span>|</span>
          <a>关于诺心</a>
          <span>|</span>
          <a>客服服务</a>
          <span>|</span>
          <a>生产经营资质</a>
          <span>|</span>
          <a>公告专区</a>
        </div>
        <div class="footer-icon">
          <a href="http://weibo.com/21cake" target="_blank">
            <img src="../../images/footericon-01.png">
          </a>
          <a class="footer-weixin">
            <div class="footer-erweima footer-weixin-erweima">
              <img src="../../images/erweima.png">
            </div>
            <img src="../../images/footericon-02.png">
          </a>
          <a class="footer-app">
            <div class="footer-erweima footer-app-erweima">
              <img src="../../images/erweima.png">
            </div>
            APP
          </a>
        </div>

        <div class="footer-text">
          <span>订购专线：4001-578-578（服务时间 09:00–21:00）</span>
          <span>客服电话：021-23099721（全国） | services@lecake.com（邮箱）</span>
          <span>杭州/广州：提前5小时预订；北京：提前6小时预订；上海：提前5.5-6小时预订；天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核） </span>
          <span>当日蛋糕配送截止下单时间：北京：16:50；上海：16:30；杭州/广州：13:50；天津：10:30；苏州/无锡/深圳：11:00</span>
          <span>网站注册公司名称: 诺心食品（上海）有限公司 地址: 上海市徐汇区虹漕路68号锦和中心7楼A、C单元 </span>
        </div>
        <div class="footer-copyright">
          <span>Copyright© 诺心leCake蛋糕官网商城 2010-2022, 版权所有 <a style="color: #9a9a9a" target="_blank"
              href="https://beian.miit.gov.cn/#/Integrated/index">沪ICP备10211730号-2</a></span>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  name: 'IndexView',
  data() {
    return {
      queryKey: '',
      user: {},
      show: true,
      activeIndex: '1',
    };
  },
  methods: {
    search() {
      //1.获取搜索关键字
      let queryKey = this.queryKey
      //2.路由跳转到商品列表组件
      this.$router.push({ path: '/productList', query: { queryKey } })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    layout() {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          this.show = true
          localStorage.clear()
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          // this.$router.push('/login')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });
        });
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('currentUser'))
    if (this.user) {
      this.show = false
    } else {
      this.show = true
    }
  }
}
</script>

<style lang="scss">
$ft-h: 10px;

body {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
  padding-bottom: $ft-h;
  background-color: #FFFAFA;
}

footer {
  height: $ft-h;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.logPic {
  margin-left: 9%;
}

.indexNav {
  margin-left: 25%;
  margin-top: -1.3%;
}

.indexNav span {
  font-size: 20px;
  font-family: "微软雅黑";
  margin-left: 20px;
  margin-right: 20px;
}

// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   // text-align: center;
//   color: #2c3e50;
// }
#app nav img {
  position: relative;
  top: 10px;
}

nav {
  padding: 10px 0;
  height: 66px;

  a {
    // font-weight: bold;
    color: #2c3e50;
    margin: 0 20px;
    font-size: 16px;
    text-decoration: none;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

footer .footer {
  background: #333;
  padding: 50px 0 0 0;
  position: relative;
}

footer .footer .footer-logo {
  display: block;
  margin: 0 auto;
}

footer .footer .footer-nav {
  text-align: center;
  color: #fff;
  margin: 25px 0;
}

footer .footer .footer-nav a {
  color: #fff;
  display: inline-block;
  margin: 0 50px;
  cursor: pointer;
}

footer .footer .footer-icon {
  text-align: center;
}

footer .footer .footer-icon .footer-erweima {
  position: absolute;
  display: block;
  height: 120px;
  width: 120px;
  left: 50%;
  margin-left: 42px;
  top: 15px;
  overflow: hidden;
  opacity: 1;
}

footer .footer .footer-icon .footer-erweima img {
  height: 100px;
  width: 100px;
  position: absolute;
  margin: 5px;
  top: 100%;
  left: 0;
  border: 10px solid #fff;
  transition: .5s;
}

footer .footer .footer-icon a {
  display: inline-block;
  border-radius: 25px;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background: #494949;
  margin: 0 25px;
  font-size: 16px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  vertical-align: middle;
}

footer .footer .footer-icon a img {
  height: 30px;
  margin: 10px;
}

footer .footer .footer-icon a .footer-weixin-erweima {
  margin-left: -64px;
}

footer .footer .footer-icon a .footer-app-erweima {
  margin-left: 42px;
}

footer .footer .footer-icon .footer-erweima:hover {
  opacity: 0;
}

footer .footer .footer-icon .footer-weixin:hover img {
  top: 0;
}

footer .footer .footer-icon .footer-app:hover img {
  top: 0;
}

footer .footer .footer-text {
  color: #9a9a9a;
  text-align: center;
  margin-top: 25px;
  line-height: 18px;
  font-size: 10px;
}

footer .footer .footer-text span {
  display: block;
}

footer .footer .footer-text span:first-child {
  font-weight: bold;
}

footer .footer .footer-copyright {
  margin: 0 auto;
  border-top: 1px solid #616161;
  margin-top: 15px;
  text-align: center;
  padding-bottom: 15px;
  font-size: 10px;
  padding-top: 12px;
}

footer .footer .footer-copyright span {
  color: #9a9a9a;
  line-height: 1.5em;
}

footer .footer .footer-copyright span a {
  cursor: pointer;
}
.btnchange {
  // background-color:rgba(255,100,0,1);
  background: #f12711;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #f5af19, #f12711);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f5af19, #f12711);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  border: rgba(255, 120, 0, 1) 1px solid;
  border-radius: 30px;
  width: 60px;
  height: 30px;
}
</style>

  